<html>
<head>
<title>Learning underscore templates</title>
<script src="./scripts/underscore.js"></script>
<script type="text/html" id="scriptTypeHtml">
<div>
<%
_.each(bikes, function(ele, index, list) { print(ele + '<br>')});
%>
</div>
</script>
<script type="text/javascript">

/*
    - values go into <%= variableName  %>
    - javascript code go into <% javascript %>
*/

// ct1 is compiled template 1
var ct1 = _.template("hello: <%= name %>");

// t2 is text after template has been evaluated with data
var t2 = _.template("hello: <%= name %>", {'name': 'tanya'});

// template text
var tt1 = "<% _.each(bikes, function(ele, index, list) { %> <li><%= ele %></li> <% }); %>";
var t3 = _.template(tt1, {'bikes': ['yamaha','honda','kawasaki','ktm','suzuki']});

var tt2 = "<% _.each(bikes, function(ele, index, list) { print('<li>' + ele + '</li>')}); %>";
var t4 = _.template(tt2, {'bikes': ['yamaha','honda','kawasaki','ktm','suzuki']});


var ct2 = _.template("<% _.each(cells, function(c) { print('<td>' + c + '</td>'); }); %>");
var cellsr1 = ['r1one','r1two','r1tre'];
var cellsr2 = ['r2one','r2two','r2tre'];
var rows = [];
rows.push(ct2({'cells': cellsr1}));
rows.push(ct2({'cells': cellsr2}));
var ct3 = _.template("<% _.each(rows, function(r) { print('<tr>' + r + '</tr>'); }); %>");


// create big templates using script type="type/html"
var sthEle = document.getElementById('scriptTypeHtml');
var bks = ['yam','hon','kaw','ktm','suz'];


// use functions?
var oobb = {
    'v1': 'v1one',
    'f1': function() { return 'f1f1'; }
};
var tt4 = _.template("hello: <%= ob.v1 %> <%= ob.f1 %>", {'ob': oobb});
var tt5 = _.template("hello: <%= ob.v1 %> <%= ob.f1() %>", {'ob': oobb});
var tt6 = _.template("hello: <%= fnct() %>", {'fnct':  function() { return 'zzz'; }});

function doit() {
    console.log(ct1({'name': 'eric'}));
    console.log(t2);
    console.log(t3);
    console.log(t4);
    console.log((ct2({'cells': cellsr1})));
    console.log((ct2({'cells': cellsr2})));
    console.log((ct3({'rows': rows})));
    console.log(_.template(sthEle.innerHTML, {'bikes': bks}));
    console.log(tt4);
    console.log(tt5);
    console.log(tt6);
}
</script>
</head>
<body>
<button type="button" name="button" onclick="doit()">Create</button>
</body>
</html>
